<template>
  <div class="app">
    这是menghuiyu首页
    <input type="text" id="wenben" v-model="textVal" @input="abc()" />
    {{ objVal }}
    {{ TestVal }}
    <button @click="btn">提交</button>
    <br />
    <button @click="setSonTestMsg">修改子组件变量</button>
    <!-- <zi
      style="background: aquamarine; color: white"
      src="//vueshop.glbuys.com/uploadfiles/1524556315.jpg"
      :params="ziParams"
      ref="ziDom"
    ></zi> -->
    <Form :options="option" @model="register"></Form>
    <zi
      style="background: aquamarine; color: white"
      src="//vueshop.glbuys.com/uploadfiles/1524556315.jpg"
      :params="ziParams"
      ref="ziDom"
    ></zi>
  </div>
</template>
<script setup>
// import { nextTick, ref } from "vue";
// const textVal = ref("");
// let a = 123456;
// nextTick(() => {
//   document.getElementById("wenben").value = a;
// });
// function abc() {
//   console.log(textVal.value);
// }
// function btn() {
//   textVal.value = new Date().getTime();
//   console.log(textVal.value);
// }
// reactive 定义的基本类型不具备响应式
// reactive 只能定义复杂数据类型时才具备响应式
// ref 定义的变量 必须使用.value进行获取和设置值

// import { ref, reactive, watch } from "vue";
// const textVal = ref("");
// const objVal = reactive({ name: 132 });
// let TestVal = reactive("123");
// function btn() {
//   objVal.name = new Date().getTime();
//   TestVal = new Date().getTime();
//   textVal.value = new Date().getTime();
// }
// watch(TestVal, (val) => {
//   console.log(textVal, 24);
// });
// watch(textVal, (val) => {
//   console.log(textVal, 27);
// });
// watch(objVal, (val) => {
//   console.log(objVal, 26);
// });
// import zi from "./zi.vue";
// import { ref, provide } from "vue";
// const ziParams = ref("父组件的变量");
// const ziDom = ref(null);
// function setSonTestMsg() {
//   ziDom.value.testMsg = new Date().getTime();
// }
// provide("test", "父组件的变量-provide");
//
import zi from "./zi.vue";
import { ref, provide } from "vue";
import Form from "../table/components/Form/index.vue";
const option = ref([
  {
    field: "a",
    label: "A的值",
    component: "Input",
    componentProps: {
      placeholder: "请输入A的值",
    },
  },
  {
    field: "b",
    label: "B的值",
    component: "Input",
    componentProps: {
      placeholder: "请输入B的值",
    },
  },
]);
import { useForm } from "../hooks/useForm";
const { register, FormParams } = useForm();
const ziParams = ref("父组件的变量");
const ziDom = ref(null);
function setSonTestMsg() {
  ziDom.value.testMsg = new Date().getTime();
}
provide("test", "父组件的变量-provide");
</script>
<style>
.app {
  width: 100%;
  height: 100vh;
  background-image: url("//vueshop.glbuys.com/uploadfiles/1484285334.jpg");

  background-repeat: no-repeat;
}
</style>
